<template>
    <L7Map map-id="my-map" @loaded="handleLoaded" :options="options"></L7Map>
</template>

<script setup lang="ts">
import { Scene, LineLayer } from '@antv/l7'

const options: any = ref({
    pitch: 60,
    center: [120.958472, 23.464292],
    zoom: 7.65,
    rotation: 33.375609237091055,
})
const handleLoaded = async (scene: Scene) => {
    const data = await fetch('/mapjson/altitude.json').then(res => res.json())
    const layer = new LineLayer({})
        .source(data)
        .size(1)
        .shape('line')
        .style({
            vertexHeightScale: 30,
            heightfixed: false
        })
        .color('#0D5EFF');

    scene.addLayer(layer);
}
</script>
